<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="js/vue.js"></script>   <!--引入vue.js文件-->
    <script src="element-ui/lib/index.js"></script>   <!--引入组件库-->
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">  <!--引入样式库-->
    <script src="js/axios-0.18.0.js"></script>
    <title>论坛详情</title>
    <style>
        .flex1{
            display: flex;
            flex-wrap: wrap;
        }
        .center{
            justify-content: center;
        }
        .between{
            justify-content: space-between;
        }
        body{
            margin: 0;
            padding: 0;
        }
        .p_no_margin{
            /*换行*/
            white-space: pre-wrap;
            margin: 0 0 5px 0;
            /*长单词折行*/
            word-wrap: break-word;
        }
        .fs{
            font-size: 14px;
            color: #606266;
            margin-top: 10px;
        }
        .dt{
            font-size: 14px;
            color: #606266;
        }
        .direction_end{
            flex-direction: column;
            align-items: flex-end;
        }
        .auto{
            margin-left: auto;
        }
        /*尾标签*/
        .footer {
            background-color: #f5f5f5;
            padding: 20px 0;
        }
        .footer-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            max-width: 610px;
            margin: 0 auto;
            padding: 0 20px;
        }

        .footer-links a {
            text-decoration: none;
            color: #333;
            margin-right: 20px;
        }

        .footer-links a:hover {
            color: #007bff;
        }

        .footer-contact {
            display: flex;
            align-items: center;
        }

        .footer-contact i {
            margin-right: 5px;
        }
        /* 弹出框样式 */
        .tooltip-container {
            position: relative;
            display: inline-block;
        }
        .tooltip-container_bottom {
            position: relative;
            display: inline-block;
        }

        .tooltip-content {
            display: none;
            position: absolute;
            bottom: 100%; /* 上方显示 */
            left:  130%;
            transform: translateX(-50%);
            background-color: #f9f9f9;
            border: 1px solid #ccc;
            padding: 10px;
            z-index: 1000;
            width: 200px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        .tooltip-content_bottom {
            display: none;
            position: absolute;
            top: 100%; /* 上方显示 */
            left:  130%;
            transform: translateX(-50%);
            background-color: #f9f9f9;
            border: 1px solid #ccc;
            padding: 10px;
            z-index: 1000;
            width: 200px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        .tooltip-container:hover .tooltip-content {
            display: block;
        }
        .tooltip-container_bottom:hover .tooltip-content_bottom {
            display: block;
        }
    /*    悬浮变色*/
        .hover{
            margin: 5px 10px;
        }
        .hover:hover{
            color: orange;
            cursor: pointer;
        }
        .centera{
            text-decoration: none;
            color: black;
        }
        .centera:hover{
            color: orange;
            text-decoration: orange;
            cursor: pointer;
        }
    /*    边框*/
        .border_right{
            border-left: 1px solid #C0C4CC;
            padding: 20px;
        }
        .modal {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: white;
            padding: 20px;
            border: 1px solid #ccc;
            overflow-y: auto;
        }


        .image-container {
            display: flex;
            flex-wrap: wrap;
        }

        .image-container img {
            margin: 5px;
            cursor: pointer;
        }
        .bottom_solid{
            border-bottom: 1px solid #DCDFE6;
            margin-bottom: 20px;
        }
        .bottom_solid2{
            border-bottom: 1px solid #F2F6FC;
            margin-bottom: 20px;
        }

        .title{
            color: #3a8ee6;
            text-decoration: none;
        }
        .title:hover{
            color: orange;
            text-decoration: underline;
            cursor: pointer;
        }
        .center{
            display: flex;
            justify-content: center;
        }
        .information{
            margin-top: 20px;
        }
        .message-container {
            display: flex;
            flex-direction: column;
            align-items: flex-end; /* 确保消息气泡靠右对齐 */
            max-width: 70%; /* 消息气泡的最大宽度 */
            margin: 10px;
        }

        .message-container-send {
            display: flex;
            flex-direction: column;
            align-items: flex-start; /* 确保消息气泡靠左对齐 */
            max-width: 70%; /* 消息气泡的最大宽度 */
            margin: 10px 10px 0 0;
            position: relative;
            top: 15px;
        }

        .message-bubble {
            position: relative;
            padding: 10px;
            margin-bottom: 10px;
            border-radius: 8px; /* 圆角边框 */
            background-color: #dcf8c6; /* 消息气泡的背景色 */
            line-height: 1.4;
            max-width: 100%;
            word-wrap: break-word; /* 允许长单词折行 */
        }

        /* 发送的消息气泡样式 */
        .sent {
            background-color: #00a699; /* 发送消息的颜色 */
            color: white; /* 文字颜色 */
            margin-left: auto; /* 消息气泡靠右 */
        }

        /* 接收的消息气泡样式，可以根据需要添加 */
        .received {
            background-color: #e6e6e6; /* 接收消息的颜色 */
            margin-right: auto; /* 消息气泡靠左 */
        }

        .qq-input-container {
            position: relative;
            max-width: 600px;
            margin: auto;
        }

        #qqMessageInput {
            width: 100%;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            resize: none;
            margin-bottom: 5px;
        }

        .emoji-picker-container {
            position: relative;
            display: inline-block;
        }

        #emojiPickerButton {
            cursor: pointer;
            background: none;
            border: none;
            outline: none;
            font-size: 24px;
            vertical-align: middle;
        }

        /*.emoji-picker {*/
        /*    position: absolute;*/
        /*    bottom: 30px; !* 根据按钮位置调整 *!*/
        /*    left: 0;*/
        /*    width: 300px; !* 根据需要调整 *!*/
        /*    border: 1px solid #ccc;*/
        /*    border-radius: 4px;*/
        /*    background-color: white;*/
        /*    padding: 10px;*/
        /*    display: none;*/
        /*    z-index: 1000;*/
        /*}*/

        .emoji-category {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            width: 200px;
        }

        .emoji {
            width: 24px;
            height: 24px;
            cursor: pointer;
            margin: 5px;
        }

        .wrap{
            word-wrap: break-word; /* 允许在单词内部的断点处进行换行 */
            overflow-wrap: break-word; /* 兼容性更好的属性 */
            /*换行*/
            white-space: pre-wrap;
            margin: 0 0 5px 0;
        }
        .box{
            transition: all 500ms linear;
        }
        .box:hover{
            background-color: #DCDFE6;
            transition: all 500ms linear;
        }
    </style>
</head>
<body>
<div id="app">
    <!-- 引用共享 div 组件 -->
    <shared-div></shared-div>
    <div  style="margin: 0 300px 0 300px;min-height: 1000px" >

        <div>
            <div class="flex1 center" style="height: 200px">
                <img src="logo/back.png" width="700px" height="250px" style="position: relative;bottom: 16px;z-index: -1"/>
            </div>
            <div class="flex1" style="background: #E4E7ED; height: 60px;" v-if="AllBar[0]">
                <div >
                    <img :src="AllBar[0].bimage" width="120px" height="120px" style="position: relative; bottom: 70px; margin-left: 10px;">
                </div>

                <div class="flex1" style="margin: 5px 0 0 20px;">
                    <div class="flex1" >
                        <p class="p_no_margin" style="font-size: 24px; font-weight: bold;">{{AllBar[0].bname}}</p>
                        <div v-if="TheUser.uid == useruid">

                        </div>
                        <div v-else-if="!isGz">
                            <el-button type="danger" style="padding: 6px 10px; margin: 3px 20px 0 20px;" @click="Gz">+关注</el-button>
                        </div>
                        <div v-else>
                            <el-button type="info" style="padding: 6px 10px; margin: 3px 20px 0 20px;" @click="Gz">-取关</el-button>
                        </div>
                        <p class="p_no_margin fs">关注量：<p class="p_no_margin fs" style="color: #eb7350;margin-right: 10px">{{AllBar[0].fc}}</p></p>
                        <p class="p_no_margin fs">帖子量：<p class="p_no_margin fs" style="color: #eb7350;margin-right: 10px">{{AllBar[0].pc}}</p></p>
                    </div>
                </div>
                <div class="auto flex1" style="width: 220px">
                    <div>
                        <el-button type="primary" style="margin: 10px 10px 0 0" v-if="!isButton" @click="makeDate">签到</el-button>
                        <el-button type="primary" style="margin: 10px 10px 0 0" v-else disabled>已签到</el-button>
                    </div>
                    <div style="height: 40px;margin-top: 5px;background: #fff;padding: 5px" @click="ShowCalendar">
                        <p class="p_no_margin dt">{{TheDate.nowdate}}</p>
                        <p class="p_no_margin dt" >连续签到{{TheDate.max}}天</p>
                    </div>
                    <el-calendar v-if="showCalendar" style="z-index: 100;position: absolute;top: 301px;right: 10px;width: 656px;height: 634px">
                        <template slot="dateCell" slot-scope="{date, data}">
                            <p :class="isSelectedDate(date) ? 'is-selected' : ''">
                                {{ formatDate(date) }} {{ isSelectedDate(date) ? '✔️' : ''}}
                            </p>
                        </template>
                    </el-calendar>
                </div>
            </div>
        </div>
<!--这里是看贴的主页面   和    坛务人员详情-->
        <div >
            <div>
                <el-tabs type="border-card" style="z-index: -1;min-height: 700px">
                    <el-tab-pane style="z-index: -1;min-height: 700px">
                        <span slot="label"><i class="el-icon-chat-line-round"></i> 看帖</span>
                        <div style="margin-top: 10px" class="flex1">
                            <div style="max-width: 740px" >
                                <div class="flex1 box" v-for="(item,index) in AllPosts.slice(0, pageSize)" :key="index"  >
                                    <div style="margin-right: 20px;height: 30px;width: 44px" class="flex1 center">
                                        <p class="p_no_margin" style="padding: 5px;background: #F56C6C;margin: 0;color: whitesmoke">{{item.pc}}</p>
                                    </div>
                                    <div style="max-width: 660px">
                                        <div @click="goToLogin(0,AllBar[0].bid,item.pid,0)">
                                            <span class="hover" style="font-size: 22px;font-weight: bold">{{item.title}}</span>
                                        </div>
                                        <div style="margin: 0 0 10px 20px">
                                            <span class="p_no_margin" >{{item.content}}</span>
                                        </div>
                                        <div class="flex1" style="max-width: 660px">
                                            <!-- 遍历每个帖子的图片数组 -->
                                            <div class="flex1 " v-for="(image, imgIndex) in item.images" style="margin: 10px">
                                                <div v-if="image.type == 'images'" style="height: 120px;width: 120px" >
                                                    <img  :key="imgIndex" :src="image.src" @click="showImage(image)" height="120px" width="120px"/>
                                                </div>
                                                <div v-else-if="image.type == 'video'" style="height: 200px;width: 300px">
                                                    <video controls height="200px" width="300px">
                                                        <source :src="image.src">
                                                    </video>
                                                </div>
                                                <div v-else-if="image.type == 'music'" style="display: flex;flex-direction: column;justify-content: flex-end;margin-bottom:20px;height: 160px;width: 300px">
                                                    <audio controls >
                                                        <source :src="image.src" >
                                                    </audio>
                                                </div>
                                            </div>

                                            <div v-if="showModal" class="modal" @click="closeModal">
                                                <div style="display: flex;justify-content: flex-end">
                                                    <button @click="closeModal" style="background-color: red;color: whitesmoke;">关闭</button>
                                                </div>
                                                <img :src="currentImage" width="400px" height="100%"/>
                                            </div>
                                        </div>
                                        <div class="flex1" v-if="index == 1">
                                            <!-- 需要展示信息的元素 -->
                                            <div class="tooltip-container">
                                                <i class="el-icon-user" style="font-size: 18px"></i>&nbsp;
                                                <span class="p_no_margin" style="font-size: 13px">{{item.name}}</span>
                                                <!-- 弹出框内容 -->
                                                <div class="tooltip-content" >
                                                    <div class="flex1">
                                                        <div>
                                                            <img :src="item.image" alt="图片" height="50px">
                                                        </div>
                                                        <div class="flex1" v-if="useruid != item.uid">
                                                            <div v-if="!isLogin">
                                                                <el-button type="danger" @click="pleace" style="padding: 8px 14px;margin: 10px 5px 0 5px">关注</el-button>
                                                            </div>
                                                            <div v-else-if="item.bc == 0">
                                                                <el-button type="danger" @click="GzUser(item.uid, item.bc, item)" style="padding: 8px 14px;margin: 10px 5px 0 5px">关注</el-button>
                                                            </div>
                                                            <div v-else>
                                                                <el-button type="info" @click="GzUser(item.uid, item.bc, item)" style="padding: 8px 14px;margin: 10px 5px 0 5px">取关</el-button>
                                                            </div>
                                                            <div>
                                                                <el-button type="primary" @click="sx" style="padding: 8px 14px;margin: 10px 5px 0 5px" >私信</el-button>
                                                            </div>
                                                        </div>
                                                        <div v-else></div>
                                                    </div>
                                                    <div class="flex1" style="margin-top: 20px;justify-content: space-around">
                                                        <div>
                                                            <p class="p_no_margin">{{item.levelname}}</p>
                                                        </div>
                                                        <div class="flex1">
                                                            <img v-for="(level,levelIndex) in item.level" :key="levelIndex" :src="levelImage[0].src" alt="#" width="20px" height="20px" style="align-items: center;right: auto"/>
                                                        </div>
                                                    </div>
                                                    <div class="flex1" style="margin-top: 20px;justify-content: space-around">
                                                        <p class="p_no_margin">粉丝量：{{item.ac}}</p>
                                                        <p class="p_no_margin">发帖量：{{item.fc}}</p>
                                                    </div>
                                                    <div>
                                                        <el-button type="primary" style="padding: 14px 70px" @click="changePageHref(item.uid)">进入主页</el-button>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="flex1" style="margin-left: 10px">
                                                <i class="el-icon-date" style="font-size: 18px"></i> &nbsp;
                                                <p class="p_no_margin" style="font-size: 13px;margin: 2px 0 5px 0">{{item.tdate}}</p>
                                            </div>
                                        </div>
                                        <div class="flex1" v-else>
                                            <!-- 需要展示信息的元素 -->
                                            <div class="tooltip-container_bottom">
                                                <i class="el-icon-user" style="font-size: 18px"></i>&nbsp;
                                                <span class="p_no_margin" style="font-size: 13px">{{item.name}}</span>
                                                <!-- 弹出框内容 -->
                                                <div class="tooltip-content_bottom" >
                                                    <div class="flex1">
                                                        <div>
                                                            <img :src="item.image" alt="图片" height="50px">
                                                        </div>
                                                        <div class="flex1" v-if="useruid != item.uid">
                                                            <div v-if="!isLogin">
                                                                <el-button type="danger" @click="pleace" style="padding: 8px 14px;margin: 10px 5px 0 5px">关注</el-button>
                                                            </div>
                                                            <div v-else-if="item.bc == 0">
                                                                <el-button type="danger" @click="GzUser(item.uid, item.bc, item)" style="padding: 8px 14px;margin: 10px 5px 0 5px">关注</el-button>
                                                            </div>
                                                            <div v-else>
                                                                <el-button type="info" @click="GzUser(item.uid, item.bc, item)" style="padding: 8px 14px;margin: 10px 5px 0 5px">取关</el-button>
                                                            </div>
                                                            <div>
                                                                <el-button type="primary" @click="sx" style="padding: 8px 14px;margin: 10px 5px 0 5px" >私信</el-button>
                                                            </div>
                                                        </div>
                                                        <div v-else></div>
                                                    </div>
                                                    <div class="flex1" style="margin-top: 20px;justify-content: space-around">
                                                        <div>
                                                            <p class="p_no_margin">{{item.levelname}}</p>
                                                        </div>
                                                        <div class="flex1">
                                                            <img v-for="(level,levelIndex) in item.level" :key="levelIndex" :src="levelImage[0].src" alt="#" width="20px" height="20px" style="align-items: center;right: auto"/>
                                                        </div>
                                                    </div>
                                                    <div class="flex1" style="margin-top: 20px;justify-content: space-around">
                                                        <p class="p_no_margin">粉丝量：{{item.ac}}</p>
                                                        <p class="p_no_margin">发帖量：{{item.fc}}</p>
                                                    </div>
                                                    <div>
                                                        <el-button type="primary" style="padding: 14px 70px" @click="changePageHref(item.uid)">进入主页</el-button>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="flex1" style="margin-left: 10px">
                                                <i class="el-icon-date" style="font-size: 18px"></i> &nbsp;
                                                <p class="p_no_margin" style="font-size: 13px;margin: 2px 0 5px 0">{{item.tdate}}</p>
                                            </div>
                                        </div>


                                        <div v-if="item.isCheck">
                                            <span class="title " @click="Check(index,item.pid)">查看评论</span>
                                        </div>
                                        <div v-else style="background-color: #E4E7ED;padding: 10px;min-width: 640px;max-width: 660px">
                                            <span class="title " @click="Check2(index)">收起评论</span>
                                            <div style="margin-top: 10px" v-for="(list,index) in DiscussList" :key="index">
                                                <div v-if="list.name != PostUser.name" class="flex1">
                                                    <img :src="list.image" height="50px" width="50px" style="border-radius: 50px"/>
                                                    <div>
                                                        <p class="p_no_margin">{{list.name}}</p>
                                                        <p class="p_no_margin" style="color: #8c939d;font-size: 12px">{{list.cdate}}</p>
                                                    </div>
                                                    <div class="message-container">
                                                        <div class="message-bubble received">
                                                            <p class="p_no_margin">{{list.text}}</p>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div v-else class="flex1" style="flex-direction: row-reverse;align-items: flex-end;margin-bottom: 10px" >


                                                    <img :src="list.image" height="50px" width="50px" style="border-radius: 50px"/>
                                                    <div>
                                                        <p class="p_no_margin" style="   text-align: right;">{{list.name}}</p>
                                                        <p class="p_no_margin" style="color: #8c939d;font-size: 12px">{{list.cdate}}</p>
                                                    </div>
                                                    <div class="message-container-send">
                                                        <div class="message-bubble send">
                                                            <p class="p_no_margin">{{list.text}}</p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="qq-input-container">
                            <textarea
                                    id="qqMessageInput"
                                    v-model="message"
                                    placeholder="输入消息..."
                                    @focus="handleFocus"
                                    @blur="handleBlur"
                            ></textarea>
                                                <div class="flex1" style="justify-content: space-around">
                                                    <div class="emoji-picker-container">
                                                        <button
                                                                id="emojiPickerButton"
                                                                title="选择表情包"
                                                                :class="{ active: isEmojiPickerVisible }"
                                                                @click="toggleEmojiPicker"
                                                        >
                                                            &#x1F600;
                                                        </button>
                                                        <div
                                                                class="emoji-picker"
                                                                v-show="isEmojiPickerVisible"
                                                        >
                                                            <!-- 这里使用v-for来循环渲染表情包 -->
                                                            <div
                                                                    class="emoji-category"
                                                                    v-for="(category, index) in emojiCategories"
                                                                    :key="index"
                                                            >
                                                                <img
                                                                        v-for="emoji in category.emojis"
                                                                        :key="emoji.src"
                                                                        class="emoji"
                                                                        :src="emoji.src"
                                                                        :data-emoji="emoji.dataEmoji"
                                                                        @click="insertEmoji(emoji.dataEmoji)"
                                                                />
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div>
                                                        <el-button plain icon="el-icon-edit" @click="submit(item.pid)">发布</el-button>
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                                <!--        分页   -->
                                <div style="display: flex; justify-content: center;">
                                    <el-pagination
                                            :background="true"
                                            layout="prev, pager, next"
                                            :total="totalData.length"
                                            :page-size="pageSize"
                                            @current-change="Page"
                                    >
                                    </el-pagination>
                                </div>
                                <div style="display: flex; justify-content: center;margin-top: 90px;width: 783.4px">
                                    <el-button type="primary" @click="addThePost" plain>点击前往发帖<i class="el-icon-edit" style="font-size: 20px"></i></el-button>
                                </div>
                                    <el-drawer
                                        title="发帖"
                                        :before-close="handleClose"
                                        :visible.sync="dialog"
                                        direction="rtl"
                                        custom-class="demo-drawer"
                                        ref="drawer"
                                >
                                    <div class="demo-drawer__content">
                                        <el-form :model="form">
                                            <el-form-item label="标题" :label-width="formLabelWidth">
                                                <el-input v-model="form.title" autocomplete="off"></el-input>
                                            </el-form-item>
                                            <el-upload
                                                    class="upload"
                                                    action=""
                                                    :limit="3"
                                                    :drag="true"
                                                    :multiple="true"
                                                    :file-list="TheImages"
                                                    :http-request="uploadHttp"
                                                    :before-upload="beforeAvatarUpload"
                                                    :on-remove="handleRemove"
                                                    list-type="picture">
                                                <i class="el-icon-upload"></i>
                                                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                                                <div class="el-upload__tip" slot="tip">上传文件只能是 JPG/JPEG/PNG/MP4/MP3 格式! 图片最大1MB 音频最大50MB 视频最大300MB</div>
                                            </el-upload>
                                            <el-form-item label="内容" :label-width="formLabelWidth">
                                                <el-input
                                                        type="textarea"
                                                        :rows="5"
                                                        placeholder="请输入内容"
                                                        v-model="form.content">
                                                </el-input>
                                            </el-form-item>


                                        </el-form>
                                        <div class="demo-drawer__footer">
                                            <el-button @click="cancelForm">取 消</el-button>
                                            <el-button type="primary" @click="addPost" :loading="loading">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
                                        </div>
                                    </div>
                                </el-drawer>


                            </div>


                            <div class="right_inf auto">
                                <div class="grid-content">
                                    <div v-if="Object.keys(TheUser).length > 0" class="information border_right">
                                        <div class="center flex1">
                                            <p class="p_no_margin" style="font-weight: bold;font-size: 22px;margin-bottom: 10px">本论坛信息</p>
                                        </div>
                                        <div class="center flex1">
                                            <a href="#" @click="goToLogin(0,0,0,TheUser.uid)">
                                                <img :src="TheUser.image" height="100px" width="100px" class="centera"/>
                                            </a>
                                        </div>
                                        <div class="center">
                                            <p class="p_no_margin">论坛主：{{ TheUser.name }}</p>
                                        </div>
                                        <div class="center" v-if="OtherUser">
                                            <p class="p_no_margin">小论主：{{ OtherUser }}人</p>
                                        </div>
                                        <div class="center" v-else>
                                            <p class="p_no_margin">小论主：暂无</p>
                                        </div>
                                        <div class="center">
                                            <p class="p_no_margin">论坛等级: {{ AllBar[0].level }}</p>
                                        </div>
                                        <div class="center flex1" >
                                            <img v-for="(level,levelIndex) in AllBar[0].level" :key="levelIndex" :src="levelImage[type].src" alt="#" width="20px" height="20px" style="align-items: center"/>
                                        </div>
                                        <div class="center flex1">
                                            <span class="p_no_margin centera center" style="font-size: 14px" @click="changeType">切换样式</span>
                                        </div>
                                        <div class="center flex1" @click="goToLogin(0,0,AllBar[0].tid,0)">
                                            <p class="p_no_margin centera center" style="font-weight: bold" >{{ AllBar[0].tname }}</p>
                                        </div>
                                        <div>
                                            <div class="center flex1" style="margin-top: 10px" >
                                                <!--   这个是申请加入小论坛主的方法-->
                                                <span  style="color: #eb7350" class="centera" v-if="isApplyMyself">您是论坛主</span>
                                                <span  style="color: #FF6A6A" class="centera" @click="open" v-else-if="!isApply">成为小论坛主</span>
                                                <span  style="color: #eb7350" class="centera" v-else-if="isApply">已经是小论坛主了</span>
                                            </div>
                                        </div>

                                    </div>
                                    <div v-else class="information" style="margin-top: 30px">
                                        <div class="center ">
                                            <a class="p_no_margin centera " href="#"  @click.prevent="goToLogin(2,0,0,0)">请前往登录</a>
                                        </div>
                                    </div>
                                </div>
                                <div></div>
                            </div>
                        </div>

                    </el-tab-pane>
                    <el-tab-pane label="坛务详情" style="z-index: -1;min-height: 700px">
                        <span slot="label"><i class="el-icon-user"></i> 坛务详情</span>
                        <div>
                            <div>
                                <div class="bottom_solid2">
                                    <p class="p_no_margin">|论坛团队（{{n.length + 1}}人）</p>
                                </div>
                            </div>
                            <div class="bottom_solid">
                                <div class="flex1">
                                    <p class="p_no_margin">论坛主</p><i class="el-icon-user-solid" style="color: #eb7350;font-size: 20px"></i>
                                </div>
                                <div style="width: 100px">
                                    <a href="#" @click.prevent="goToLogin(0,0,0,TheUser.uid)">
                                        <img :src="TheUser.image" alt="#" width="100px" height="100px"/>
                                    </a>
                                    <div class="flex1 center">
                                        <p class="p_no_margin">{{TheUser.name}}</p>
                                    </div>
                                </div>
                            </div>
                            <div class="bottom_solid">
                                <div class="flex1">
                                    <p class="p_no_margin">小论坛主</p><i class="el-icon-user-solid" style="color: #3a8ee6;font-size: 20px"></i>
                                </div>
                                <div class="flex1"  style="max-width: 1050px;flex-wrap: wrap">
                                    <div v-for="(item,index) in n" :key="index" style="width: 100px;margin-right: 20px" >
                                        <div>
                                            <a href="#" @click.prevent="goToLogin(0,0,0,item.uid)">
                                                <img :src="item.image" alt="#" width="100px" height="100px"/>
                                            </a>
                                        </div>
                                        <div class="flex1 center">
                                            <p class="p_no_margin">{{item.name}}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="bottom_solid flex1 between">
                                <div class="flex1" >
                                    <div style="padding: 70px 10px 70px 50px">
                                        <i class="el-icon-user-solid" style="color: #eb7350;font-size: 50px"></i>
                                    </div>
                                    <div style="padding: 70px 50px 0 0;">
                                        <p class="p_no_margin">论坛主</p>
                                        <p class="p_no_margin" style="color: #8c939d;font-size: 14px">1.确定论坛发展方向，
2.建设管理论坛团队（论坛务招募、论坛务管理、论坛务监管）
3.建设管理发展论坛（规则制度、内容建设、会员管理）</p>
                                    </div>
                                </div>
                                <div class="flex1" >
                                    <div style="padding: 70px 10px 70px 50px">
                                        <i class="el-icon-user-solid" style="color: #3a8ee6;font-size: 50px"></i>
                                    </div>
                                    <div style="padding: 70px 10px 0 0;">
                                        <p class="p_no_margin">小论坛主</p>
                                        <p class="p_no_margin" style="color: #8c939d;font-size: 14px">1.成为论坛主有力的左右手
2.管理贴子（清理不良信息，引导言论）
3.管理会员（沟通引导）</p>
                                    </div>
                                </div>
                            </div>
                            <div style="margin-top: 30px">
                                <div>
                                    <div class="bottom_solid2">
                                        <p class="p_no_margin">|候选团队（{{apply.length}}人）</p>
                                    </div>
                                </div>
                                <div class="bottom_solid" >
                                    <div class="flex1" style="max-width: 1050px;flex-wrap: wrap">
                                        <div style="width: 100px;margin-right: 20px" v-for="(item,index) in apply" :key="index">
                                            <a href="#" @click.prevent="goToLogin(0,0,0,item.uid)">
                                                <img :src="item.image" alt="#" width="100px" height="100px"/>
                                            </a>
                                            <div class="flex1 center">
                                                <p class="p_no_margin">{{item.name}}</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>
    </div>

    <div style="position: absolute;top:196px;left: 1087px;">
        <el-button type="danger" plain @click="goBack">返回上一页</el-button>
    </div>




<!--    尾标签-->
    <footer class="footer">
        <div class="footer-content">
            <div class="footer-links">
                <a href="#">关于我们</a>
                <a href="#">联系我们</a>
                <a href="#">常见问题</a>
                <a href="#">隐私政策</a>
            </div>
            <div class="footer-contact">
                <i class="fas fa-phone"></i>
                <span>联系电话: 123456789</span>
            </div>
        </div>
    </footer>
</div>
<script src="js/commentDiv.js"></script>
<script>
    // 等待页面完全加载后再初始化Vue实例
    window.onload = function () {
        new Vue({
            el: '#app',
            mounted() {
                this.name = getCookie("name");
                this.password = getCookie("password");

                if (this.name && this.name.trim() !== "" && this.password && this.password.trim() !== "") {
                    this.isLogin = true;
                } else {
                    this.isLogin = false;
                }
                // 辅助函数，用于获取cookie的值
                function getCookie(name) {
                    let cookieArr = document.cookie.split(";");
                    for(let i = 0; i < cookieArr.length; i++) {
                        let cookiePair = cookieArr[i].trim().split("=");
                        if (cookiePair[0] === name) {
                            return cookiePair[1];
                        }
                    }
                    return "";
                }
                axios.get("users/findByName_pwd",{params:{name : this.name,password:this.password}}).then(x=>{
                    this.useruid = x.data.uid;
                    this.userQQ = x.data.phone;
                        this.findAllDiscuss();
                })

            },
            data: {
                //每日签到
                everyday:'',
                //论坛信息
                barObject:{},
                //切换内置页面
                activeIndex: '1',
                //输入框 查询
                input:'',
                //用户信息  小论坛主数量
                TheUser:{},
                OtherUser:'',
                //当前论坛的所有的贴子
                AllPosts:[],
                //图片查看
                images: [],
                showModal: false,
                currentImage: 0,
                //帖子总评论数
                number: 0,
                //论坛的信息
                AllBar:[],
                //等级  样式
                levelImage:[
                    {src: "level/level1.png"},
                    {src: "level/level2.png"},
                    {src: "level/level3.png"},
                    {src: "level/level4.png"}
                ],
                type:0,
                //查询小论坛主
                n:[],
                //后补小论坛主
                apply:[],
                totalData: [], //分好类的数据直接扔进去  后面分页使用
                // 初始页码
                currentPage: 1,
                // 每页显示的条目数
                pageSize: 5,
                dialog: false,
                loading: false,
                form: {},
                formLabelWidth: '80px',
                timer: null,
                TheImages:[],
                uploadConf: {
                    region: null,
                    accessKeyId: null,
                    accessKeySecret: null,
                    bucket: null,
                    stsToken: null,
                },
                objectName: '',
                url: '',
                //判断登录情况
                name: '',
                password: '',
                isLogin: false,
                //当前登录人的信息
                PostUser:{},

                isGz: false,
                useruid: '',
                userQQ:'',

                //查看评论
                //输入框 发布评论的
                message: '',
                isEmojiPickerVisible: false,
                emojiCategories: [
                    {
                        name: 'People',
                        emojis: [
                            { src: 'emojis/emoji1.png', dataEmoji: '😄' },
                            { src: 'emojis/emoji2.png', dataEmoji: '😂' },
                            { src: 'emojis/emoji3.png', dataEmoji: '🤣' },
                            { src: 'emojis/emoji4.png', dataEmoji: '😅' },
                            { src: 'emojis/emoji5.png', dataEmoji: '😆' },
                            { src: 'emojis/emoji6.png', dataEmoji: '😉' },
                            { src: 'emojis/emoji7.png', dataEmoji: '😊' },
                            { src: 'emojis/emoji8.png', dataEmoji: '😋' },
                            { src: 'emojis/emoji9.png', dataEmoji: '😎' },
                            { src: 'emojis/emoji10.png', dataEmoji: '😍' },
                            { src: 'emojis/emoji11.png', dataEmoji: '😘' },
                            { src: 'emojis/emoji12.png', dataEmoji: '😤' },
                            { src: 'emojis/emoji13.png', dataEmoji: '😢' },
                            { src: 'emojis/emoji14.png', dataEmoji: '😭' },
                            { src: 'emojis/emoji15.png', dataEmoji: '😬' },
                            { src: 'emojis/emoji16.png', dataEmoji: '😰' },
                            { src: 'emojis/emoji17.png', dataEmoji: '😱' },
                            { src: 'emojis/emoji18.png', dataEmoji: '😳' },
                            { src: 'emojis/emoji19.png', dataEmoji: '😵' },
                            { src: 'emojis/emoji20.png', dataEmoji: '🤡' },
                        ],
                    },
                    // 可以添加更多分类...
                ],
                DiscussList: [],
                //审核
                isApply: false,
                isApplyMyself: false,

                TheDate:{},
                showCalendar: false,
                selectedDates: [], // 示例的选中日期列表
                isButton: false,
            },
            methods: {
                //切换执行的方法
                handleSelect(key, keyPath) {
                    console.log(key, keyPath);
                },
                //名字悬浮的  信息
                performAction() {
                    alert('按钮被点击');
                },
                //获取用户信息
                findUser(uid){
                    // 在index.html页面加载时读取
                    axios.get("users/findByUid",{params:{uid : uid}}).then(x=>{
                        this.TheUser = x.data;
                        const a = this.AllBar[0].otherid;
                        if (a){
                            const arr = a.split(',');
                            this.OtherUser = arr.length;
                        }
                        //获取url参数
                        const queryString = window.location.search;
                        //获取所有  进行分配空间
                        const urlParams = new URLSearchParams(queryString);
                        //从中选择
                        const uidValue = urlParams.get('u');
                        //判断是不是自己的论坛
                        // 打印输出以确认属性和变量的值
                        console.log("this.PostUser.uid: " + this.PostUser.uid);
                        console.log("vuidValue: " + uidValue);
                        this.isApplyMyself = this.AllBar[0]?.uid == this.PostUser.uid;
                        console.log(this.isApplyMyself)
                        let IsContains = this.AllBar[0]?.otherid && this.AllBar[0].otherid.includes(this.PostUser.uid);
                        this.isApply = !!IsContains;

                        this.getUser(this.AllBar[0].otherid);

                    })
                },
                findAllDiscuss(){
                    //获取url参数
                    const queryString = window.location.search;
                    //获取所有之后 进行 分配空间
                    const urlParams = new URLSearchParams(queryString);
                    //从中选择  b = bid
                    const bidValue = urlParams.get('b');
                    const uidValue = urlParams.get('u');
                    if (bidValue == null){

                    }else {
                        axios.get("posts/getDiscuss_Bar",{params: {bid: bidValue,uid:uidValue}}).then(x=>{
                            this.AllPosts = x.data;
                            this.totalData = this.AllPosts;
                            // 遍历每个帖子以处理其中的图片字符串
                            for (let i = 0; i < this.AllPosts.length; i++) {
                                //用于评论显示的  收起和查看评论
                                // 为每个帖子添加 isCheck 属性
                                this.$set(this.AllPosts[i], 'isCheck', true);
                            }
                            if (this.AllPosts.length <=5 ){
                                this.pageSize = this.AllPosts.length;
                            }else {

                            }
                            // 遍历每个帖子以处理其中的图片字符串
                            for (let i = 0; i < this.AllPosts.length; i++) {
                                // console.log("new"+this.PostList)
                                const arr = this.AllPosts[i].images;
                                if (arr != null) {
                                    // 使用 split 方法来拆分字符串
                                    const arrList = arr.split(';');
                                    // 更新 PostList 中的 images 属性
                                    this.AllPosts[i].images = arrList.map(a => {
                                        if (a.includes('images')) {
                                            return { src: a, type: 'images' };
                                        } else if (a.includes('music')) {
                                            return { src: a, type: 'music' };
                                        } else if (a.includes('video')) {
                                            return { src: a, type: 'video' };
                                        } else {
                                            return { src: a }; // 默认情况，如果都不包含任何特定关键词
                                        }
                                    });
                                } else {
                                    // 如果 arr 不是字符串或为 null，设置 images 为空数组
                                    this.AllPosts[i].images = [];
                                }
                            }
                            console.log(this.AllPosts)
                            // 在index.html页面加载时读取
                            this.name = getCookie("name");
                            this.password = getCookie("password");

                            if (this.name && this.name.trim() !== "" && this.password && this.password.trim() !== "") {
                                this.isLogin = true;
                            } else {
                                this.isLogin = false;
                            }
                            // 辅助函数，用于获取cookie的值
                            function getCookie(name) {
                                let cookieArr = document.cookie.split(";");
                                for(let i = 0; i < cookieArr.length; i++) {
                                    let cookiePair = cookieArr[i].trim().split("=");
                                    if (cookiePair[0] === name) {
                                        return cookiePair[1];
                                    }
                                }
                                return "";
                            }
                            axios.get("users/findByName_pwd",{params:{name : this.name,password:this.password}}).then(x=>{
                                this.PostUser = x.data;
                            })

                            // 合并所有帖子中的 images 到一个数组中
                            this.images = this.AllPosts.reduce((acc, post) => {
                                if (Array.isArray(post.images) && post.images.length > 0) {
                                    acc.push(...post.images);
                                }
                                return acc;
                            }, []);
                            this.getDate();
                            this.findBarInformation(bidValue);
                        }).catch(error => {
                            console.error("Error fetching posts:", error);
                        });
                    }

                },
                //对小坛主的查询
                getUser(n){
                    axios.get("bars/getUser",{params:{uid : n}}).then(x=>{
                        this.n = x.data;
                        if (this.n.length === 0) {
                            this.n = '暂无';
                        }
                        //获取url参数
                        const queryString = window.location.search;
                        //获取所有之后 进行 分配空间
                        const urlParams = new URLSearchParams(queryString);
                        //从中选择  b = bid
                        const bidValue = urlParams.get('b');
                        this.gz(bidValue);
                        this.findApply(bidValue);

                    }).catch(error => {
                        console.error("Error fetching posts:", error);
                    });
                },
                findApply(bid){
                      axios.get("users/findApply",{params:{bid:bid}}).then(x=>{
                          this.apply = x.data;
                      })
                },
                //查看图片  关闭的功能
                closeModal() {
                    this.showModal = false;
                },
                showImage(image) {
                    this.showModal = true;
                    this.currentImage = image.src;
                    console.log("showModal" + this.showModal +"currentImage" + this.currentImage)
                },
                findBarInformation(bid){
                    axios.get("bars/getAllBarsByBid",{params:{bid:bid}}).then(x=>{
                        this.AllBar = x.data;
                        this.findUser(this.AllBar[0].uid);
                    })
                },
                //改变样式
                changeType(){
                    // 切换到下一个样式，如果到达数组末尾则重置为第一个样式
                    this.type = (this.type + 1) % this.levelImage.length;
                },
                //分页
                // 处理页码变化的事件
                Page(newPage) {
                    this.currentPage = newPage;
                    // 更新 tableData 以反映当前页的数据
                    this.AllPosts = this.currentTableData;
                },

                handleClose(done) {
                    if (this.loading) {
                        return;
                    }
                    this.$confirm('确定要提交表单吗？')
                        .then(_ => {
                            this.loading = true;
                            this.timer = setTimeout(() => {
                                done();
                                // 动画关闭需要一定的时间
                                setTimeout(() => {
                                    this.loading = false;
                                }, 400);
                            }, 2000);
                        })
                        .catch(_ => {});
                },
                cancelForm() {
                    this.loading = false;
                    this.dialog = false;
                    clearTimeout(this.timer);
                },
                /**
                 * 阿里云OSS上传
                 */
                uploadHttp({ file }) {
                    // 检查已上传文件数量是否超过限制
                    if (this.url.split(';').length >= 3) {
                        this.$message({
                            message: '最多上传三个文件',
                            type: 'warning'
                        });
                        return;
                    }

                    // 创建FormData对象，并添加文件数据
                    const formData = new FormData();
                    formData.append("file", file);

                    // 发送POST请求到后端
                    axios.post('/tools/oss', formData, {
                        headers: {
                            "Content-Type": "multipart/form-data"
                        }
                    }).then(response => {
                        console.log('上传成功', response);
                        console.log(response.data);
                        let parts = response.data.split('&&&');
                        if (this.url === '') {
                            this.url = parts[0];
                        } else {
                            this.url += ";" + parts[0];
                        }
                        this.objectName = parts[1];
                        console.log(this.url + this.objectName);
                    }).catch(error => {
                        console.error('上传失败', error);
                        this.$message.error('上传失败，请稍后重试。');
                    });
                },
                /**
                 * 图片限制
                 */
                beforeAvatarUpload(file) {
                    const fileType = file.name.toLowerCase();
                    const isImage = /\.(jpg|jpeg|png)$/.test(fileType);
                    const isVideo = /\.(mp4)$/.test(fileType);
                    const isAudio = /\.(mp3)$/.test(fileType);

                    let maxSizeMB;
                    if (isImage) {
                        maxSizeMB = 1; // 图片最大1MB
                    } else if (isAudio) {
                        maxSizeMB = 50; // 音频最大50MB
                    } else if (isVideo) {
                        maxSizeMB = 300; // 视频最大300MB
                    } else {
                        this.$message.error('上传文件只能是 JPG/JPEG/PNG/MP4/MP3 格式!');
                        return false;
                    }

                    const maxSizeBytes = maxSizeMB * 1024 * 1024;
                    const isLtMaxSize = file.size / 1024 < maxSizeBytes;

                    if (!isLtMaxSize) {
                        this.$message.error(`当前文件大小不能超过 ${maxSizeMB}MB!`);
                    }

                    return (isImage || isVideo || isAudio) && isLtMaxSize;

                },


                /**
                 * 移除图片
                 */
                handleRemove (file, fileList) {
                    console.log('移除图片', file, fileList);
                    axios.get("tools/del",{params:{objectName:this.objectName}}).then(x=>{
                        if(x.data == 'ok'){
                            // 删除最后一个分号及其后面的内容
                            let lastIndex = this.url.lastIndexOf(';');
                            if (lastIndex !== -1) {
                                this.url = this.url.substring(0, lastIndex);
                            } else {
                                // 如果没有分号，则直接清空 this.url
                                this.url = '';
                            }
                            this.$message({
                                message: '删除成功',
                                type: 'warning'
                            });
                        }
                    })
                },
                addPost(){
                    //获取urlcanshu
                    const queryString = window.location.search;
                    const userParams = new URLSearchParams(queryString);
                    const bidValue = userParams.get('b');
                  axios.get("posts/addPost",{params:{uid:this.PostUser.uid,bid:bidValue,title:this.form.title,
                      content:this.form.content,images:this.url}}).then(x=>{
                      this.$message({
                          message: '发布成功',
                          type: 'success'
                      });
                      window.location.reload();
                  })
                },
                //关注
                gz(bid) {
                    axios.get("users/gzbar", { params: { uid: this.useruid, bid: bid } })
                        .then(x => {
                            this.isGz = x.data; // 根据返回的数据确定是否已关注
                        });
                },
                Gz() {
                    const bidValue = (new URLSearchParams(window.location.search)).get('b');
                    if (this.isLogin){
                        if (!this.isGz) {
                            axios.get("users/addGzbar", { params: { uid: this.useruid, bid: bidValue } })
                                .then(x => {
                                    if (x.data) {
                                        this.$message({
                                            message: '关注成功',
                                            type: 'success'
                                        });
                                        this.isGz = true; // 更新关注状态
                                        this.AllBar[0].fc++;
                                    }
                                });
                        } else {
                            axios.get("users/delGzbar", { params: { uid: this.useruid, bid: bidValue } })
                                .then(x => {
                                    if (x.data) {
                                        this.$message({
                                            message: '取关成功',
                                            type: 'warning'
                                        });
                                        this.isGz = false; // 更新关注状态
                                        this.AllBar[0].fc--;
                                    }
                                });
                        }
                    }else{
                        this.$message({
                            message: '请先登录',
                            type: 'warning'
                        });
                    }
                },
                GzUser(uidValue, val, item) {
                    if (this.isLogin){
                        if (val == 0) {
                            axios.get("users/addGz", { params: { uid: this.PostUser.uid, otherid: uidValue } }).then(x => {
                                if (x.data) {
                                    this.$message({
                                        message: '关注成功',
                                        type: 'success'
                                    });
                                    item.bc ++
                                }
                            });
                        } else {
                            axios.get("users/delGz", { params: { uid: this.PostUser.uid, otherid: uidValue } }).then(x => {
                                if (x.data) {
                                    this.$message({
                                        message: '取关成功',
                                        type: 'warning'
                                    });
                                    item.bc --;
                                }
                            });
                        }
                    }else{
                        this.$message({
                            message: '请先登录',
                            type: 'warning'
                        });
                    }
                },

                changePageHref(uidValue){
                    window.location.href = 'userdetail.html?uid=' +uidValue;
                },
                sx(){
                    this.$prompt('请输入聊天室名称', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消'
                    }).then(({ value }) => {
                        window.open(`a.html?userid=${this.name}&title=${value}`)
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '取消输入'
                        });
                    });
                },

                Check(index,pid){
                    //首先遍历所有 的帖子  设置为true  也就是处于待查看状态
                    this.AllPosts.forEach(post=>{
                        this.$set(post,'isCheck',true);
                    });
                    //让点击查看后  状态切换
                    this.$set(this.AllPosts[index], 'isCheck', !this.AllPosts[index].isCheck);

                    console.log(this.AllPosts)
                    //如果状态值为false  之后执行查询人物的方法
                    if(this.AllPosts[index].isCheck){

                    }else {
                        this.AllDiscuss(pid);
                    }
                },
                Check2(index){
                    //让点击查看后  状态切换
                    this.$set(this.AllPosts[index], 'isCheck', !this.AllPosts[index].isCheck);
                },

                toggleEmojiPicker() {
                    this.isEmojiPickerVisible = !this.isEmojiPickerVisible;
                },
                insertEmoji(emoji) {
                    this.message += emoji;
                    this.isEmojiPickerVisible = false;
                },
                handleFocus() {
                    // 当输入框获得焦点时可以执行的操作
                },
                handleBlur() {
                    // 当输入框失去焦点时可以执行的操作
                },
                //查询到帖子下面的评论区
                AllDiscuss(pid){
                    axios.get("posts/getDiscuss",{params:{pid:pid}}).then(x=>{
                        this.DiscussList = x.data;
                    })
                },
                //提交评论
                submit(pid){
                    if (this.name && this.password ){
                        axios.get("posts/addDiscuss",{params:{uid:this.PostUser.uid,text:this.message,pid:pid}}).then(x=>{
                            this.$message({
                                message: '成功发布',
                                type: 'success'
                            });
                            this.findAllDiscuss(pid);
                            this.message ='';
                        })
                    }else{
                        this.$message({
                            message: '请前往登录',
                            type: 'warning'
                        });
                    }
                    if ( !this.message ){
                        this.$message({
                            message: '请写出的想法',
                            type: 'warning'
                        });
                    }
                },
                //最外层跳转到登录界面   个人中心、登录、论坛、个人、帖子
                goToLogin(index,bid,tid,uid) {
                    if (index == 1){
                        window.top.location.href = `center.html`;
                    }
                    if (index == 2){
                        window.top.location.href = 'log_in.html';
                    }
                    if (tid && !uid && !bid && !index){
                        console.log(bid)
                        window.location.href = `bartype.html?type=${tid}`
                    }
                    if (tid && bid){
                        window.location.href = `postdetail.html?bid=${bid}&pid=${tid}`
                    }
                    if (uid && !bid && !tid && !index){
                        console.log(uid)
                        window.top.location.href = `userdetail.html?uid=${uid}`
                    }
                },

                open() {
                    this.$prompt('请输入邮箱（已默认@qq.com）', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*/,
                        inputErrorMessage: '邮箱格式不正确'
                    }).then(({ value }) => {
                        if (value == this.userQQ){
                            axios.get("users/addApply",{params:{uid:this.PostUser.uid,bid:this.AllBar[0].bid}}).then(x=>{
                                this.$message({
                                    type: 'warning',
                                    message: '等待论坛主审核通过'
                                });
                            })
                        }else{
                            this.$message.error("与本账号QQ号不符");
                        }

                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '取消输入'
                        });
                    });
                },
                goBack(){
                    window.history.back();
                },
                addThePost(){
                    if (this.isLogin){
                        this.dialog = true;
                    }else{
                        this.$message({
                            message: '请先登录',
                            type: 'warning'
                        });
                    }
                },
                pleace(){
                    this.$message({
                        message: '请先登录',
                        type: 'warning'
                    });
                },
                //签到
                isSelectedDate(date) {
                    // 判断日期是否在 selectedDates 中
                    return this.selectedDates.includes(this.formatDate(date));
                },
                formatDate(date) {
                    // 将日期对象格式化为 'YYYY-MM-DD' 的字符串
                    const year = date.getFullYear();
                    const month = String(date.getMonth() + 1).padStart(2, '0');
                    const day = String(date.getDate()).padStart(2, '0');
                    return `${year}-${month}-${day}`;
                },
                ShowCalendar(){
                    this.showCalendar = !this.showCalendar;
                },
                getDate(){
                    const currentDate = new Date();
                    this.TheDate.nowdate = this.formatDate(currentDate);
                    axios.get("users/getDate",{params:{uid:this.useruid}}).then(x=>{
                        this.selectedDates = x.data;
                        if (this.selectedDates.includes(this.TheDate.nowdate)){
                            this.isButton = true;
                        }
                        // 克隆并排序日期数组
                        let dates = this.selectedDates.slice().sort();

                        let maxConsecutiveDays = 0;
                        let currentConsecutiveDays = 1;

                        // 遍历日期数组，从第二个日期开始比较
                        for (let i = 1; i < dates.length; i++) {
                            let currentDate = new Date(dates[i]);
                            let previousDate = new Date(dates[i - 1]);

                            let timeDiff = (currentDate - previousDate) / (1000 * 60 * 60 * 24);

                            if (timeDiff === 1) {
                                // 如果相差1天，表示连续
                                currentConsecutiveDays++;
                            } else {
                                // 如果不连续，更新最大连续天数并重置计数器
                                if (currentConsecutiveDays > maxConsecutiveDays) {
                                    maxConsecutiveDays = currentConsecutiveDays;
                                }
                                currentConsecutiveDays = 1; // 重置为1，因为当前日期也算一个连续天数
                            }
                        }

                        // 最后还需要检查一次，因为可能最长的连续天数在末尾
                        if (currentConsecutiveDays > maxConsecutiveDays) {
                            maxConsecutiveDays = currentConsecutiveDays;
                        }
                        this.TheDate.max =  maxConsecutiveDays;
                        console.log(this.TheDate)
                        console.log(this.selectedDates+"date")
                    })
                },
                makeDate(){
                    axios.get("users/makeDate",{params:{uid:this.useruid,date:this.TheDate.nowdate}}).then(x=>{
                        if(x.data == 'ok'){
                            axios.get("users/addEx",{params:{uid:this.useruid}}).then(x=>{})
                            this.$message({
                                message: '签到成功！金币 + 8  经验 + 10',
                                type: 'success'
                            });
                            this.isButton = true;
                            this.TheDate.max ++;
                        }
                    })
                }

            },
            computed:{
                currentTableData() {
                    const startIndex = (this.currentPage - 1) * this.pageSize;
                    const endIndex = startIndex + this.pageSize;
                    return this.totalData.slice(startIndex, endIndex);
                }
            },
            watch: {
                // 监听 totalData 的变化，更新 tableData
                totalData: {
                    immediate: true,
                    handler(newVal) {
                        this.tableData = this.currentTableData;
                    }
                }
            },
        });
    };
</script>
</body>
</html>
